import { useEffect, useRef } from "react";

const { Menu, MenuItem, getCurrentWindow } = window.require("@electron/remote");

// itemArr 菜单子项数组，包含label和方法
// targetSelector 右击的区域，
const useContextMenu = (itemArr, targetSelector) => {
    // 点击的dom
    let clickedElement = useRef(null);
    useEffect(() => {
        const menu = new Menu();
        itemArr.forEach((item) => {
            // 添加右击菜单元素
            menu.append(new MenuItem(item));
        });
        const handleContextMenu = (e) => {
            // 只有包裹 e.target 的父级才能被点击
            if (document.querySelector(targetSelector).contains(e.target)) {
                clickedElement.current = e.target;
                // 弹出右击菜单
                menu.popup({ window: getCurrentWindow() });
            }
        };
        window.addEventListener("contextmenu", handleContextMenu);
        return () => {
            window.removeEventListener("contextmenu", handleContextMenu);
        };
    });
    // 把选中的dom元素暴露到外部，给对应的方法使用
    return clickedElement;
};

export default useContextMenu;
